<template>
  <br>
  <button class="btn btn-xs btn-success" @click="swapMarket(0)">显示A股</button>
  <button class="btn btn-xs btn-success" @click="swapMarket(1)">显示港股</button>
  <table v-show="list && list.length > 0" class="table table-bordered table-hover">
    <caption>公告列表</caption>
    <thead>
      <tr>
        <th class="col-xs-1">交易市场</th>
        <th class="col-xs-1">显示位置</th>
        <th class="col-xs-3">内容</th>
        <th>链接</th>
        <th>显示时间</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in list">
        <td>
          <span v-if=" +it.market === 0 ">A股</span>
          <span v-if=" +it.market === 1 ">港股</span>
        </td>
        <td>
          <span v-if=" +it.position === 0 ">交易</span>
          <span v-if=" +it.position === 1 ">证券</span>
        </td>
        <td>{{it.content}}</td>
        <td>{{it.url}}</td>
        <td class="col-nowrap">
          <span v-if=" +it.type === 0 ">全程显示</span>
          <span v-if=" +it.type === 1 ">每日按时间段</span>
        </td>
        <td>{{it.validBeginTime}}</td>
        <td>{{it.validEndTime}}</td>
        <td class="col-nowrap text-right">
          <button class="btn btn-sm btn-primary" @click="updateItem(it)">修改</button>
          <button class="btn btn-sm btn-danger" @click="deleteItem(it.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<script src="./list.js"></script>